import React, { Component } from 'react'
import { StatusBar, Alert, Modal, TouchableOpacity, WebView, Clipboard, BackHandler,ActivityIndicator,ScrollView, View, Text, Button} from 'react-native'
import QRCode from 'react-native-qrcode'
import Icon from 'react-native-vector-icons/FontAwesome'
import { connect } from 'react-redux'
import AppConfig from '../Config/AppConfig'
const domain = AppConfig.domain
import Share from '../Lib/Share'
//import * as WeChat from 'react-native-wechat'

import PromotionActions from '../Redux/PromotionRedux'

// Styles
import styles from './Styles/PromotionScreenStyle'

class PromotionScreen extends Component {
  static navigationOptions = {
    title: '分享有礼'
  }
  constructor(props) {
    super(props)
    this.state = {
      modalVisible: false,
      modal2Visible: false,
    }
  }
  componentDidMount() {
    this.props.getQrcode(this.props.token)
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onBackPress = () => {
    this.props.navigation.goBack()
    return true
  }
  //_copyLink() {
  //  Clipboard.setString(this.props.qrcode.payload)
  //  Alert.alert('复制成功')
  //}
  //_wechatShareToSession() {
  //  WeChat.shareToTimeline({
  //    message: this.props.qrcode.payload
  //  })
  //  .then((result) => console.tron.log(result))
  //  .catch((error) => console.error(error))
  //}
  //_wechatShare() {
  //  WeChat.shareToTimeline({
  //      type: 'text',
  //      description: this.props.qrcode.payload
  //  })
  //  .then((result) => console.tron.log(result))
  //  .catch((e) => {
  //    if (e instanceof WeChat.WechatError) {
  //      console.error(e.stack)
  //    } else {
  //      throw e
  //    }
  //  })
  //}
  openShare = () => {
    const promotion = this.props.promotion.payload
    Share.showShare(promotion.desc, promotion.thumb, promotion.link)
  }
  //_share() {
  //  Share.share({
  //    title:'分享有礼',
  //    message:this.props.qrcode.payload,
  //    url:this.props.qrcode.payload
  //  })
  //}
  render () {
    if (this.props.promotion.fetching) {
      return <ActivityIndicator style={{marginTop:20}} />
    }
    if (!this.props.promotion.payload) {
      return null
    }
    return (
      <View style={styles.container}>
        <StatusBar translucent={false} barStyle='dark-content' backgroundColor='white' />
        <Modal
          visible={this.state.modal2Visible}
          animationType='fade'
          transparent={true}
          onRequestClose={()=>{}}>
          <View style={{flex:1,backgroundColor:'rgba(0,0,0,0.8)'}}>
            <View style={{position:'absolute',bottom:0,right:0,width:'100%',backgroundColor:'white'}}>
              <View style={styles.iconContainer}>
                <TouchableOpacity
                  onPress={()=>this._wechatShare()}
                  style={styles.iconItem}>
                <View style={[styles.icon, {backgroundColor:'#2CC990'}]}>
                  <Icon name='wechat' color='white' size={22} />
                </View>
                <Text>朋友圈</Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={()=>this._copyLink()}
                style={styles.iconItem}>
                <View style={[styles.icon, {backgroundColor:'#FCB941'}]}>
                  <Icon name='link' color='white' size={22} />
                </View>
                <Text>复制链接</Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={()=>this.setState({modal2Visible:false,modalVisible:true})}
                style={styles.iconItem}>
                <View style={[styles.icon, {backgroundColor:'#897FBA'}]}>
                  <Icon name='qrcode' color='white' size={22} />
                </View>
                <Text>二维码</Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={()=>this._share()}
                style={styles.iconItem}>
                <View style={[styles.icon, {backgroundColor:'#E26E67'}]}>
                  <Icon name='bars' color='white' size={22} />
                </View>
                <Text>更多</Text>
              </TouchableOpacity>
            </View>
            <TouchableOpacity
              style={{marginBottom:20,alignItems:'center'}}
              onPress={()=>this.setState({modal2Visible:false})}>
              <Icon name='remove' size={26} color='darkgrey' />
            </TouchableOpacity>
            </View>
          </View>
        </Modal>
        <WebView
          startInLoadingState={true}
          style={styles.web}
          source={{uri:domain+'/api/member/invite?token='+this.props.token}} />
        <TouchableOpacity
          activeOpacity={0.8}
          onPress={this.openShare}
          style={styles.button}>
          <Text style={styles.buttonText}>分享</Text>
        </TouchableOpacity>
        <Modal
          onRequestClose={()=>{}}
          transparent={false}
          visible={this.state.modalVisible}>
          <View style={styles.modal}>
            <TouchableOpacity
              style={styles.modalCloseButton}
              onPress={()=>this.setState({modal2Visible:true,modalVisible:false})}>
              <Icon name='remove' size={24} />
            </TouchableOpacity>
            <QRCode
              value={this.props.promotion.payload}
              size={200} />
          </View>
        </Modal>
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    token: state.user.payload.token,
    promotion: state.promotion
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getQrcode: (token) => dispatch(PromotionActions.promotionRequest(token))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(PromotionScreen)
